<template>
  <button @click="show = !show">点击</button>
  <transition name="fade">
    <div v-if="show">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae possimus
      distinctio nemo ad cupiditate similique, officia animi ex atque totam
      minus at officiis neque tenetur iste consequatur perferendis, libero
      culpa! Dolorum esse tempora in velit laudantium officiis. Quasi quis natus
      iusto totam illum. Sint eveniet possimus, perspiciatis quasi accusamus
      blanditiis enim nulla harum tempora deleniti. Sint aut quae nobis autem!
      Molestiae ut totam necessitatibus voluptate accusamus vel itaque,
      consequatur recusandae pariatur minima. Deserunt, facere. Pariatur dolorem
      reiciendis iste, nemo quam, porro laborum rerum quidem sapiente
      repudiandae cumque tenetur sunt sequi!
    </div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Demo',
  setup () {
    const show = ref(false)
    return {
      show
    }
  }
}
</script>

<style lang="less" scoped>
div {
  width: 400px;
  background-color: pink;
  padding: 20px;
}
.fade-enter-from,
.fade-leave-to {
  // opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter-to,
.fade-leave-from {
  transform: translateX(0%);
}
</style>
